<!-- demoPage -->
<template>
  <div class="teacher-page" ref="teacher">
    <div class="managementHeader">
      <div class="headerLeft">
        <el-input
          placeholder="请输入关键字查找"
          suffix-icon="el-icon-search"
          v-model="searchValue"
          @change="searchHandler"
        ></el-input>
      </div>
      <div class="header-right">
        <mc-button
          ref="McButton"
          v-if="quickButtons.length"
          :quickButtons="quickButtons"
          @buttonsEvent="buttonsEvent"
        ></mc-button>
      </div>
    </div>
    <mc-table
      ref="mcTable"
      :labels="tableLabels"
      :data="tableData"
      :settings="tableSettings"
      @current-change="currentChange"
    >
      <template v-slot:handle>
        <el-table-column label="操作" align="center" header-align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editHandle(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="removeHandle(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
    </mc-table>
    <mc-pager
      ref="McPager"
      v-if="pager"
      :settings="page"
      @current-change="getTableData"
      @size-change="sizeChange"
    ></mc-pager>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="showDialog"
      :before-close="dialogClose"
      width="800px"
    >
      <mc-form
        ref="updateForm"
        @emitFormData="emitFormData"
        idx="0"
        :labels="updateFormObj[0]['formLabels']"
        :data="updateFormObj[0]['formData']"
        :rules="updateFormObj[0]['formRules']"
        :settings="formSettings"
        v-bind="$attrs"
      >
      </mc-form>

      <div
        slot="footer"
        class="dialog-footer"
        v-if="dialogContent == 'add' || dialogContent == 'edit'"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          v-if="dialogContent == 'add'"
          @click="submitDialog('add')"
          >确 定</el-button
        >
        <el-button
          type="primary"
          @click="submitDialog('edit')"
          v-if="dialogContent == 'edit'"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import McButton from "@/basePackage/McButton";
import McTable from "@/basePackage/McTable";
import McPager from "@/basePackage/McPager";
import McForm from "@/basePackage/McForm";

import {
  getTeacherList,
  deleteTeacherByTeacherId,
  addOrUpdateTeacherInfo,
} from "@/api/parentSchoolApi";

export default {
  data() {
    return {
      quickButtons: ["add", "delete"],
      searchValue: "",

      // table
      tableLabels: [
        {
          label: "编号",
          prop: "introduction",
          type: "string",
        },
        {
          label: "姓名",
          prop: "name",
          type: "string",
        },
        {
          label: "出生年月",
          prop: "birth",
          type: "string",
        },
        {
          label: "封面",
          prop: "coverUrl",
          type: "string",
          slotName: "coverImg",
        },
        {
          label: "操作",
          prop: "op",
          slotName: "handle",
        },
      ],
      tableSettings: {
        attrs: {
          loading: false,
          height: 500,
        },
      },
      multipleSelection: [],
      deleteId: [],

      /**分页 */
      pager: true,
      page: {
        "current-page": 1,
        total: 0,
        background: true,
      },

      // 弹出框
      dialogVisible: false,
      dialogTitle: "",
      dialogContent: "",
      updateFormObj: [
        {
          formData: {},
          formSettings: {
            attrs: {},
            itemAttrs: {
              "label-width": "50px",
            },
          },
          formRules: {},
        },
      ],
    };
  },
  components: {
    McButton,
    McTable,
    McPager,
    McForm,
  },

  computed: {},

  mounted() {
    this.calcTableHeight();
  },

  methods: {
    /**计算表格高度 */
    calcTableHeight() {
      let vm = this;
      vm.$nextTick(() => {
        let buttonHeight = 0;
        if (vm.$refs.mcButton && vm.$refs.mcButton.$el.offsetHeight) {
          buttonHeight = vm.$refs.mcButton.$el.offsetHeight;
        }
        this.$refs.mcTable.setTableAttr(
          "height",
          vm.$refs.demo.offsetHeight - buttonHeight - 20
        );
      });
    },
    //按钮回调
    buttonsEvent(val) {
      this.dialogContent = val.value;
      switch (val.value) {
        case "add":
          {
            this.dialogContent = "add";
            this.dialogTitle = "新增名师";
            this.dialogVisible = true;
            this.updateFormObj[0].formData = {
              birth: "",
              coverUrl: "",
              id: null,
              introduction: "",
              isKnown: "",
              name: "",
            };
          }
          break;
        case "edit":
          {
            this.dialogContent = "edit";
            this.dialogTitle = "修改名师";
            this.dialogVisible = true;
            this.updateFormObj[0].formData = {
              birth: "",
              coverUrl: "",
              id: null,
              introduction: "",
              isKnown: "",
              name: "",
            };
          }
          break;
        case "delete":
          {
            this.$confirm("是否确定删除此条数据?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
        
            });
          }
          break;
      }
    },

    //提交表单
    submitDialog() {
      this.showDialog = false;
      this.tableSettings.attrs.loading = true;
      setTimeout(() => {
        this.tableSettings.attrs.loading = false;
        if (this.dialogContent == "add") {
         
        }
        if (this.dialogContent == "edit") {
     
          // this.$message.success("修改成功！");
        }
      }, 500);
    },
  },
};
</script>

<style lang="scss"  scoped>
.teacher-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: #fefeff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  /deep/ .managementHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    width: 100%;
    margin-bottom: 10px;
    .headerLeft {
      width: 264px;
      height: 40px;
      .el-input__inner {
        height: 40px;
        line-height: 40px;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 8px;
      }
      .el-input__suffix {
        font-size: 18px;
        line-height: 40px;
      }
    }
    .delete {
      border-color: #1776f4;
      color: #1776f4;
    }
  }
  .lendType {
    padding: 2px 6px;
    color: #f5b140;
    border: 1px solid #000;
    box-sizing: border-box;
    border-radius: 20px;
  }
  .loan {
    border-color: #f5b140;
    padding: 4px 8px;
    background: rgba(245, 177, 64, 0.1);
  }
  .noloan {
    background: rgba(55, 199, 130, 0.1);
    border-color: #37c782;
    color: #37c782;
    padding: 4px 8px;
  }
  .onLine {
    border-color: #39a0ff;
    color: #39a0ff;
    background: rgba(57, 160, 255, 0.1);
  }
  .noonLine {
    background: rgba(161, 104, 255, 0.1);
    border-color: #a168ff;
    color: #a168ff;
  }
}
</style>
